<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>go go go物车</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/assets/img/icon/favicon.png}">

    <!-- 导入CSS样式-->
    <th:block th:insert="~{/fixed/header::head}"></th:block>
</head>

<script>
    function goodsNum(cid){
        console.log(cid)
        let goodsNum = $('#goodsNum' + cid).val();
        console.log(goodsNum)
        if (goodsNum <= 0 || "" == goodsNum){
            alert("商品数量不能小于等于0或为空")
            $('#goodsNum' + cid).val(1);
        }else {
            //传输数据到后端
            $.ajax({
                url:"/cart/updataQuantity",
                method:"POST",
                data:{"cid":cid,"goodsNum":goodsNum},
                success:function (data){
                    if (data){
                        console.log("商品数量修改成功")
                    }else {
                        alert("库存不足，商品数量过多")
                        $('#goodsNum' + cid).val(1);
                    }
                }
            })
        }

    }
</script>

<body>
<!--    导入头部导航条   -->
<th:block th:insert="~{/fixed/headBar::headBar}"></th:block>

<main>
    <!-- 霸屏标题开始 -->
    <div class="hero-area section-bg2">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="slider-area">
                        <div class="slider-height2 slider-bg4 d-flex align-items-center justify-content-center">
                            <div class="hero-caption hero-caption2">
                                <h2>购物车</h2>
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb justify-content-center">
                                        <li class="breadcrumb-item"><a th:href="@{/index}">主页</a></li>
                                        <li class="breadcrumb-item"><a href="#">购物车</a></li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--  霸屏标题结束 -->
    <!--================ 购物车开始 =================-->
    <section class="cart_area">
        <div class="container">
            <div class="cart_inner">
                <div class="table-responsive">
                    <!-- 购物车列表开始 -->
                    <table class="table">
                        <!-- 购物车表头 -->
                        <thead>
                        <tr>
                            <th scope="col" style="padding-left: 114px;">商品名</th>
                            <th scope="col">单价</th>
                            <th scope="col">数量</th>
                            <th scope="col" style="padding-left: 68px;">是否购买</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 购物车循环遍历登录用户对应的购物车内容 -->
                        <tr class="cart" th:each="cart:${cartList}">
                            <td>
                                <div class="media">
                                    <div class="d-flex">
                                        <img th:src="'http://localhost:8888' + ${cart.goodsImg}"/>
                                    </div>
                                    <div class="media-body">
                                        <p th:text="${cart.goodsName}"></p>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <h5>
                                    ￥<span th:text="${cart.goodsPrice}"></span>
                                </h5>
                            </td>
                            <td>
                                <div class="product_count">
                                    <input th:id="${'goodsNum' + cart.cid}" th:onblur="|goodsNum(${cart.cid})|" type="number"  th:value="${cart.quantity}" min="1" th:max="${cart.goodsStock}">
                                </div>
                            </td>
                            <td>
                                <a th:href="@{/orders/confirm(cid = ${cart.cid})}" class="genric-btn danger circle">购买</a>
                                <a th:href="@{/cart/delete(gid = ${cart.gid})}" class="genric-btn danger-border circle">移除</a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </section>
    <!--================End Cart Area =================-->
</main>

<!--    导入底部导航条-->
<th:block th:insert="~{/fixed/footBar::footBar}"></th:block>

</body>
<!--导入JS代码-->
<th:block th:insert="~{/fixed/footer::foot}"></th:block>
</html>